<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom?safebottom+120:150}rpx;`">
		<fui-form labelColor="#7a7a7a" ref="form" top="0" :model="formData" :show="false" labelWidth="190">
			<fui-form-item label="停车券名称" asterisk prop="title">
				<fui-input placeholder="请输入停车券名称" :borderBottom="false" :padding="[0]" v-model="formData.title"></fui-input>
			</fui-form-item>
			<fui-form-item label="规则介绍" asterisk prop="description">
				<fui-input placeholder="请简单介绍停车券的减免规则" :borderBottom="false" :padding="[0]" v-model="formData.description"></fui-input>
			</fui-form-item>
			<fui-form-item label="优惠类型" asterisk prop="coupon_type">
				<fui-radio-group name="radio" v-model="formData.coupon_type">
					<view style="width: 100%;display: flex;">
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="free"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">免费券</text>
							</view>
						</fui-label>
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="time"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">时长券</text>
							</view>
						</fui-label>
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="cash"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">代金券</text>
							</view>
						</fui-label>
					</view>
					<view style="width: 100%;display: flex;margin-top: 20rpx;">
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="discount"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">折扣券</text>
							</view>
						</fui-label>
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="period"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">时效券</text>
							</view>
						</fui-label>
						<fui-label style="width: 33%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="timespan"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">时段券</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
			<fui-form-item label="优惠时长" asterisk prop="time" v-if="formData.coupon_type=='time'">
				<fui-input type="number" placeholder="请输入优惠时长" :borderBottom="false" :padding="[0]" v-model="formData.time">
					<text>分钟</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="优惠金额" asterisk prop="cash" v-if="formData.coupon_type=='cash'">
				<fui-input type="number" placeholder="请输入优惠金额" :borderBottom="false" :padding="[0]" v-model="formData.cash">
					<text>元</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="优惠折扣" asterisk prop="discount" v-if="formData.coupon_type=='discount'">
				<fui-input type="digit" placeholder="请输入优惠折扣" :borderBottom="false" :padding="[0]" v-model="formData.discount">
					<text>折</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="优惠时效" asterisk prop="period" v-if="formData.coupon_type=='period'">
				<fui-input type="number" placeholder="请输入优惠时效" :borderBottom="false" :padding="[0]" v-model="formData.period">
					<text>小时</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="优惠时段" asterisk prop="timespan" v-if="formData.coupon_type=='timespan'">
				<fui-textarea placeholder="请输入优惠时段" :borderBottom="false" :padding="[0]" v-model="formData.timespan"></fui-textarea>
			</fui-form-item>
			<fui-form-item label="最长优惠" asterisk prop="timespan_time" v-if="formData.coupon_type=='timespan'">
				<fui-input type="number" placeholder="请输入最长优惠时间" :borderBottom="false" :padding="[0]" v-model="formData.timespan_time">
					<text>分钟</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="进场前领券" prop="before_entry">
				<fui-radio-group name="radio" v-model="formData.before_entry">
					<view class="fui-list__item">
						<fui-label style="width: 35%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="allow"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">允许</text>
							</view>
						</fui-label>
						<fui-label style="width: 50%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="refuse"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">不允许</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
			<fui-form-item label="限领一张券" prop="limit_one">
				<fui-radio-group name="radio" v-model="formData.limit_one">
					<view class="fui-list__item">
						<fui-label style="width: 35%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="1"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">是</text>
							</view>
						</fui-label>
						<fui-label style="width: 50%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="0"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">否</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
			<fui-form-item label="可叠加使用" prop="multiple_use" v-if="(formData.coupon_type=='time' || formData.coupon_type=='cash' || formData.coupon_type=='period') && formData.limit_one===0">
				<fui-radio-group name="radio" v-model="formData.multiple_use">
					<view class="fui-list__item">
						<fui-label style="width: 35%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="1"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">是</text>
							</view>
						</fui-label>
						<fui-label style="width: 50%;">
							<view class="fui-align__center">
								<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="0"></fui-radio>
								<text style="margin-left: 10rpx;" class="fui-text">否</text>
							</view>
						</fui-label>
					</view>
				</fui-radio-group>
			</fui-form-item>
			<fui-form-item label="有效时长" prop="effective">
				<fui-input type="number" placeholder="不填或者输入0时为永久有效" :borderBottom="false" :padding="[0]" v-model="formData.effective">
					<text>小时</text>
				</fui-input>
			</fui-form-item>
			<fui-form-item label="公众号设置" arrow prop="subscribe_mpapp">
				<fui-input readonly @click="showMpapp=true" :borderBottom="false" :padding="[0]" :value="formData.subscribe_mpapp_txt"></fui-input>
			</fui-form-item>
		</fui-form>
		<fui-picker :options="mpapp" :show="showMpapp" @change="changePicker" @cancel="cancelPicker"></fui-picker>
		<view class="fui-btn__box" :style="`bottom: ${safebottom || 30}rpx;`">
			<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
		</view>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	export default {
		data() {
			return {
				safebottom:0,
				disabledButton:false,
				formData:{
					id:'',
					title:'',
					description:'',
					coupon_type:'time',
					time:60,
					cash:4,
					discount:8,
					period:24,
					timespan:'',
					timespan_time:'',
					before_entry:'allow',
					limit_one:1,
					multiple_use:1,
					effective:'',
					subscribe_mpapp:1,
					subscribe_mpapp_txt:'必须先关注公众号后才能领券'
				},
				mpapp:['不用关注公众号直接领券','必须先关注公众号后才能领券'],
				showMpapp:false
			}
		},
		onLoad(e) {
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom*2;
			  }
			});
			if(e.id){
				this.getDetail(e.id);
			}
		},
		methods: {
			...methods,
			changePicker:function(e){
				let value=e.value;
				this.formData.subscribe_mpapp=this.mpapp.indexOf(value);
				this.formData.subscribe_mpapp_txt=value;
				this.showMpapp=false;
			},
			cancelPicker:function(){
				this.showMpapp=false;
			},
			getDetail:function(id){
				this.$get('parking/merch/coupon-setting-detail',{id:id}).then(res=>{
					if(res.coupon_type=='timespan'){
						let str='';
						res.timespan.forEach(t=>{
							str+=t.starttime+'-'+t.endtime+'\n';
						});
						str=str.trim();
						res.timespan=str;
					}
					if(!res.description){
						res.description='';
					}
					this.formData=res;
					this.formData.subscribe_mpapp_txt=this.mpapp[this.formData.subscribe_mpapp];
				});
			},
			submit:function(){
				let rules=[
					{
						name: "title",
						rule: ["required"],
						msg: ["请输入停车券名称"]
					}
				];
				switch(this.formData.coupon_type){
					case 'time':
						rules.push({
							name: "time",
							rule: ["required"],
							msg: ["请输入优惠时长"]
						});
						break;
					case 'cash':
						rules.push({
							name: "cash",
							rule: ["required"],
							msg: ["请输入优惠金额"]
						});
						break;
					case 'discount':
						rules.push({
							name: "discount",
							rule: ["required"],
							msg: ["请输入优惠折扣"]
						});
						break;
					case 'period':
						rules.push({
							name: "period",
							rule: ["required"],
							msg: ["请输入优惠时效"]
						});
						break;
					case 'timespan':
						rules.push({
							name: "timespan",
							rule: ["required"],
							msg: ["请输入优惠时段"],
							validator:[{msg:'优惠时段格式不正确',method:function(data){
								data=data.replace(/\n/g, ';');
								data=data.split(';');
								for(let i=0;i<data.length;i++){
									if(data[i].indexOf('-')==-1){
										return false;
									}
									let time=data[i].split('-');
									let starttime=time[0];
									let endtime=time[1];
									if(!/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(starttime) || !/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(endtime)){
										return false;
									}
									if(parseInt(starttime.replace(':',''))>=parseInt(endtime.replace(':',''))){
										return false;
									}
								}
								return true;
							}}]
						});
						break;
				}
				this.disabledButton=true;
				this.$refs.form.validator(this.formData,rules,true).then(res =>{
					if (res.isPassed) {
						this.$post('parking/merch/coupon-setting',this.formData,true,true).then(res=>{
							uni.setStorageSync('refresh',1);
							this.$navigateBack(1500);
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-btn__box{
	position: fixed;
	width: 96%;
	left: 2%;
	z-index: 1;
}
.fui-list__item{
	display: flex;
	width: 100%;
}
</style>